<template>
  <div class="page">
    <div class="wode-header">
      <template v-if="isLogin">
        <img class="avatar" :src="userinfo.profile.avatarUrl" alt="" />
        <p>{{userinfo.account.userName}}</p>
      </template>
      <h2 v-else @click="handleLogin">未登录, 点我登录</h2>
      <!-- <div class="center">
        <div class="centera">
          <h3>任务中心</h3>
          <span>每日30份 1音符夺VIP</span>
        </div>
        |
        <div class="centera">
          <h3>会员中心</h3>
          <span>【虎年特惠】 会员限时5.6折</span>
        </div>
      </div> -->
    </div>
    <div class="wode-body">
      <div class="wode-body-menu">
        <div class="wode-body-menu__item">
          <i class="my-icon my-icon-music"></i>
          <h5>本地</h5>
          <span>1</span>
        </div>
        <div class="wode-body-menu__item">
          <i class="my-icon my-icon-history"></i>
          <h5>最近播放</h5>
          <span>{{ currentPlayHistory.length }}</span>
        </div>
        <div class="wode-body-menu__item">
          <i class="my-icon my-icon-like"></i>
          <h5>我喜欢</h5>
          <span>{{ currentFavoriteList.length }}</span>
        </div>
        <div class="wode-body-menu__item">
          <i class="my-icon my-icon-message"></i>
          <h5>消息</h5>
          <span>0</span>
        </div>
        <div class="wode-body-menu__item">
          <i class="my-icon my-icon-marks"></i>
          <h5>已购</h5>
          <span>1</span>
        </div>
      </div>
      <div class="wode-body-listen">
        <div class="wode-body-listen__header">
          <h4>最近常听</h4>
          <span></span>
        </div>
        <div class="wode-body-listen__list">
          <div class="wode-body-listen__item" v-for="(item, index) in 3" :key="index">
            <img src="https://p2.music.126.net/aqmBlcqPiuc8Eve7HhkKKA==/109951164436903612.jpg" alt="" />
            <p>warma 我已经完全喜欢上沃玛了ヾ(❀╹◡╹)ﾉ~</p>
            <i class="my-icon my-icon-timeout"></i>
          </div>
        </div>
      </div>
      <div class="wode-body-settings">
        <div class="wode-body-settings__item">
          <i class="my-icon my-icon-setting"></i>
          <h3>设置</h3>
          <i class="my-icon my-icon-next"></i>
        </div>
        <!-- my-icon-information -->
        <div class="wode-body-settings__item">
          <i class="my-icon my-icon-callingrobort"></i>
          <h3>帮助与客服</h3>
          <i class="my-icon my-icon-next"></i>
        </div>
        <div class="wode-body-settings__item">
          <i class="my-icon my-icon-suggestion"></i>
          <h3>问题与建议</h3>
          <i class="my-icon my-icon-next"></i>
        </div>
        <div class="wode-body-settings__item">
          <i class="my-icon my-icon-information"></i>
          <h3>开发者</h3>
          <i class="my-icon my-icon-next"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useMyStores } from '@/store';
import { useMyRouters } from '@/router';

const { isLogin, userinfo, currentPlayHistory, currentFavoriteList } = useMyStores();
const { router } = useMyRouters();

const handleLogin = () => {
  router.push({
    path: '/login'
  })
}
</script>

<style lang="less" scoped>
// .page {
//   padding-left: 0;
//   padding-right: 0;
// }
.wode-header {
  width: 100%;
  text-align: center;
  .avatar {
    margin-top: 20px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    box-shadow: 0 0 3px 3px #ccc;
  }
  p {
    font-size: 16px;
    font-weight: 600;
  }
  h2 {
    padding: 30px 0;
  }
  .center {
    height: 50px;
    // background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 10px 0;
    .centera {
      width: 40%;
    }
    h3 {
      font-size: 16px;
      padding-bottom: 3px;
    }
    span {
      display: inline-block;
      max-width: 95%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgba(0, 0, 0, 0.801);
    }
  }
}

.wode-body {
  // width: 100%;
  // height: 600px;
  // background-color: #f7f5f5;
  border-radius: 15px 15px 0 0;
  // padding: 0 15px;
  .wode-body-menu {
    display: flex;
    padding: 10px 0;
    .wode-body-menu__item {
      width: 20%;
      text-align: center;
      i {
        color: #ec4141;
        // background-color: #ec4141;
        // border-radius: 50%;
      }
      h5 {
        padding-bottom: 3px;
      }
      span {
        color: rgba(0, 0, 0, 0.603);
      }
    }
  }

  .wode-body-listen {
    // padding: 0 10px;
    .wode-body-listen__header {
      display: flex;
      align-items: center;
      h4 {
        flex: 1;
        font-size: 17px;
      }
      span {
        color: rgba(0, 0, 0, 0.801);
      }
    }
    .wode-body-listen__list {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      .wode-body-listen__item {
        width: 32%;
        overflow: hidden;
        position: relative;
        img {
          width: 110px;
          height: 110px;
          border-radius: 15px;
        }
        p {
          color: #464141;
          line-height: 18px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        i {
          color: #ffffff;
          font-size: 24px;
          position: absolute;
          top: 70px;
          left: 5px;
        }
      }
    }
  }

  .wode-body-settings {
    // padding: 0 10px;
    .wode-body-settings__item {
      display: flex;
      height: 40px;
      align-items: center;
      margin-bottom: 5px;
      h3 {
        flex: 1;
        padding: 0 3px 0 10px;
        font-size: 16px;
      }
      i {
        font-size: 28px;
      }
      i:last-child {
        font-size: 24px;
      }
    }
  }
}
</style>
